<template>
  <div ref="wrapRef">
    <div :class="`${prefixCls}__title`">
      <component :is="title" v-if="title" />
    </div>
    <Loading :loading="loading" :marginLeft="getRealWidth" :size="loadingSize" />
    <div :class="`${prefixCls}`" v-if="dataSource">
      <div :class="`${prefixCls}__content`">
        <a-row :gutter="[10, 10]" wrap>
          <a-col v-for="record in dataSource" v-bind="getColProps">
            <Card hoverable :style="getCardStyle">
              <template #[replaceCardSlotKey(item)]="data" v-for="item in getCardSlotKeys">
                <div class="card-content">
                  <slot :name="item" :record="record || {}"></slot>
                </div>
              </template>
              <template #actions>
                <!-- <SettingOutlined key="setting" /> -->
                <!-- <EditOutlined key="edit" /> -->
                <!-- <EllipsisOutlined key="ellipsis" /> -->
                <slot name="customActions" v-bind="getActionSlotData(record) || {}"></slot>
              </template>
              <CardMeta>
                <template #[replaceCardMetaSlotKey(item)]="data" v-for="item in getCardMetaSlotKeys">
                  <div class="card-content" :style="{ width: cardProps?.style?.width || '100%' }">
                    <slot :name="item" :record="record || {}"></slot>
                  </div>
                </template>
              </CardMeta>
            </Card>
          </a-col>
        </a-row>
      </div>
      <Pagination
        v-if="dataSource && dataSource.length > 0"
        v-model:current="pagination.current"
        :defaultPageSize="pagination.defaultPageSize"
        v-model:pageSize="pagination.pageSize"
        :total="pagination.total"
        :show-total="(total) => `一共 ${pagination.total} 数据`"
        :showSizeChanger="pagination.showSizeChanger"
        :pageSizeOptions="pagination.pageSizeOptions"
        :size="pagination.size"
        @change="handlePageChange"
      />
      <Empty v-else />
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, toRefs, reactive, watchEffect } from "vue"
  import { Empty, Card, Pagination } from "ant-design-vue"
  import { ActionItem } from "/@/components/Table"
  import { SettingOutlined, EditOutlined, EllipsisOutlined } from "@ant-design/icons-vue"
  import { Loading } from "/@/components/Loading"
  import { useMenuSetting } from "/@/hooks/setting/useMenuSetting"
  import { CardProps } from "../types/table"
  import { isFunction, isArray } from "/@/utils/is"
  import { useCard } from "../hooks/useCard"
  import { propTypes } from "/@/utils/propTypes"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { SizeEnum } from "/@/enums/sizeEnum"

  import type { PaginationProps } from "../types/pagination"
  export default defineComponent({
    components: {
      Loading,
      Empty,
      Card: Card,
      CardMeta: Card.Meta,
      SettingOutlined,
      EditOutlined,
      EllipsisOutlined,
      Pagination,
    },
    props: {
      actions: {
        type: Array as PropType<ActionItem[]>,
        default: null,
      },
      pagination: {
        type: Object as PropType<PaginationProps>,
        default: {},
      },

      cardProps: {
        type: Object as PropType<CardProps>,
        default: null,
      },
      dropDownActions: {
        type: Array as PropType<ActionItem[]>,
        default: null,
      },
      dataSource: {
        type: Array as PropType<Recordable[]>,
        default: null,
      },
      columns: {
        type: Array as PropType<Recordable[]>,
        default: null,
      },
      title: propTypes.any.def(null),
      loading: propTypes.bool.def(true),
    },
    emits: ["change"],
    setup(props, { attrs, emit, slots, expose }) {
      const { getCardMetaSlotKeys, replaceCardMetaSlotKey, replaceCardSlotKey, getCardSlotKeys } = useCard(slots)

      const compState = reactive({
        loadingSize: SizeEnum.DEFAULT,
      })

      const { getRealWidth } = useMenuSetting()
      const { prefixCls } = useDesign("card-table-body")
      function getActionSlotData(dataSource: Recordable) {
        const data: any = {
          record: dataSource,
          column: {},
        }
        data.column = props.columns.find((e) => e.dataIndex === "action")
        return data
      }

      const getColStyle = computed(() => {
        const { cardProps } = unref(props)
        return {
          color: "red",
          width: cardProps?.style?.width || "100%",
        }
      })

      const getCardStyle = computed(() => {
        const { cardProps } = unref(props)
        return {
          padding: "5px",
          ...(cardProps?.style || {}),
          width: "100%",
          minWidth: cardProps?.style?.width || "100%",
          height: cardProps?.style?.height || "100%",
        }
      })

      const getColProps = computed(() => {
        const { cardProps } = unref(props)
        const colEx = cardProps?.colEx || {}
        return {
          xs: colEx.xs || 24,
          sm: colEx.sm || 12,
          md: colEx.md || 8,
          lg: colEx.lg || 8,
          xl: colEx.xl || 6,
          xxl: colEx.xxl || 4,
        }
      })

      const handlePageChange = (page, pageSize) => {
        console.log("page: ", page, ", pageSize: ", pageSize)
        // 这里和ant-table 改变回调数据保持一致方便上层统一处理
        const data = [
          { ...props.pagination, pageSize },
          {},
          {},
          {
            action: "paginate",
            currentDataSource: [...props.dataSource],
          },
        ]
        delete data[0].itemRender
        emit("change", data)
      }

      return {
        getRealWidth,
        getColProps,
        getColStyle,
        prefixCls,
        getCardStyle,
        getActionSlotData,
        getCardMetaSlotKeys,
        replaceCardMetaSlotKey,
        replaceCardSlotKey,
        getCardSlotKeys,
        handlePageChange,
        ...toRefs(compState),
      }
    },
  })
</script>
<style lang="less">
  @border-color: #cecece4d;

  @prefix-cls: ~"@{namespace}-card-table-body";

  .@{prefix-cls} {
    border: 1px solid @table-border-color !important;
    background-color: #ffffff;
    padding: 10px 20px 10px 20px;
    border-radius: 8px !important;
    &__content {
      display: flex;
      width: 100% !important;
    }

    &__content .ant-row {
      width: 100% !important;
    }

    .ant-pagination {
      display: flex;
      margin-top: 10px;
      justify-content: flex-end;
    }

    // margin: 20px
    &__title {
      background-color: #ffffff;
      padding: 5px;
      border-radius: 8px !important;
      margin-bottom: 10px;
    }

    .ant-card .card-content {
      margin: auto;
    }
    .ant-card .ant-card-cover .card-content {
      margin: auto;
    }
  }
</style>
